<template>
  <div class="form3">
    <ep-advance-card title="分步表单" theme="theme-1" class="c1"> 将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。 </ep-advance-card>
    <ep-advance-card class="c2">
      <ep-steps class="step-c" :active="active" :center="true" finish-status="success" @title-click="handleTitleClick">
        <ep-step title="填写转账信息"></ep-step>
        <ep-step title="确认转账信息"></ep-step>
        <ep-step title="完成"></ep-step>
      </ep-steps>
      <template v-if="active == 0">
        <ep-form ref="form1" class="form-container" :form="formData1" :rules="rules1" name-width="120px" size="normal">
          <ep-form-item label="付款卡号：" attr="property1" required>
            <ep-input v-model="formData1.property1" name="property1"></ep-input>
          </ep-form-item>
          <ep-form-item label="收款账号：" attr="property2" required>
            <ep-select placeholder="请选择" v-model="formData1.property5" filterable class="select-area">
              <ep-select-item v-for="item in selectArr" :key="item.value" :index="item.value" :label="item.name"></ep-select-item>
            </ep-select>
            <ep-input class="input-area" v-model="formData1.property2" name="property2"></ep-input>
          </ep-form-item>
          <ep-form-item label="收款人姓名：" attr="property3" required>
            <ep-input v-model="formData1.property3" name="property3"></ep-input>
          </ep-form-item>
          <ep-form-item label="收款金额(￥)：" attr="property4" required>
            <ep-input v-model="formData1.property4" name="property4"></ep-input>
          </ep-form-item>
          <ep-form-item>
            <ep-button type="primary" size="normal" @click="next">下一步</ep-button>
          </ep-form-item>
        </ep-form>
        <ep-divider></ep-divider>
        <div class="intro-layout">
          <h4>说明</h4>
          <p><strong>转账到微信</strong></p>
          <p>
            如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
          </p>
          <p><strong>转账到支付宝</strong></p>
          <p>
            如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
          </p>
        </div>
      </template>
      <template v-if="active == 1">
        <ep-form ref="form2" class="form-container" :form="formData2" :rules="rules2" name-width="120px" size="normal">
          <ep-alert class="alert-c" title="确认转账后，资金将直接打入对方账户，无法退回。" type="info" show-icon></ep-alert>
          <ep-form-item label="付款卡号：">{{ formData1.property1 }}</ep-form-item>
          <ep-form-item label="收款账号：">{{ formData1.property2 }}</ep-form-item>
          <ep-form-item label="收款人姓名：">{{ formData1.property3 }}</ep-form-item>
          <ep-form-item label="收款金额(￥)：">{{ formData1.property4 }}</ep-form-item>
          <ep-divider></ep-divider>
          <ep-form-item label="支付密码：" attr="property5" required>
            <ep-input type="password" v-model="formData2.property5" name="property5"></ep-input>
          </ep-form-item>
          <ep-form-item>
            <ep-button type="primary" @click="submit" size="normal" :loading="loading">提交</ep-button>
            <ep-button type="primary" plain="true" size="normal" @click="prev">上一步</ep-button>
          </ep-form-item>
        </ep-form>
      </template>
      <template v-if="active == 2">
        <div class="t1">操作成功<br /><span>(预计两小时内到账)</span></div>

        <ep-advance-card class="c3">
          <ep-form name-width="120px" size="normal">
            <ep-form-item label="付款卡号：">{{ formData1.property1 }}</ep-form-item>
            <ep-form-item label="收款账号：">{{ formData1.property2 }}</ep-form-item>
            <ep-form-item label="收款人姓名：">{{ formData1.property3 }}</ep-form-item>
            <ep-form-item label="收款金额(￥)：">{{ formData1.property4 }}</ep-form-item>
          </ep-form>
        </ep-advance-card>
        <div class="btn-wrap">
          <ep-button type="primary" @click="toFirst" size="normal">再转一笔</ep-button>
        </div>
      </template>
    </ep-advance-card>
  </div>
</template>

<script>
export default {
  name: 'form3',
  data() {
    return {
      active: 0,
      formData1: {
        property1: '232232234545566',
        property2: 'tom@163.com',
        property3: 'jack',
        property4: 1000,
        property5: 'zfb'
      },
      formData2: {
        property5: '111'
      },
      selectArr: [
        { value: 'zfb', name: '支付宝' },
        { value: 'wx', name: '微信' }
      ],
      rules1: {
        property1: { required: true, message: '请输入', trigger: 'change' },
        property2: { required: true, message: '请输入', trigger: 'change' },
        property3: { required: true, message: '请输入', trigger: 'change' },
        property4: { required: true, message: '请输入', trigger: 'change' }
      },
      rules2: {
        property5: { required: true, message: '请输入', trigger: 'change' }
      },
      loading: false
    }
  },
  methods: {
    next() {
      this.$refs.form1.validate(valid => {
        if (valid) {
          if (this.active++ > 2) this.active = 0
        }
      })
    },
    prev() {
      this.active--
    },
    toFirst() {
      this.active = 0
    },
    submit() {
      this.loading = true
      this.$refs.form2.validate(valid => {
        if (valid) {
          setTimeout(() => {
            if (this.active++ > 2) this.active = 0
            this.loading = false
          }, 1000)
        }
      })
    },
    handleTitleClick(index, stepVm) {
      console.log(index)
    }
  }
}
</script>
<style lang="less" scoped>
.form3 {
  position: relative;
  .c1 {
    margin-bottom: 15px;
  }
  .c2 {
    margin-bottom: 15px;
    .ep-row {
      margin-bottom: 0;
    }
    .form-container {
      width: 450px;
      margin: 0 auto 25px;
    }
    .step-c {
      width: 450px;
      margin: 0 auto;
      margin-bottom: 20px;
    }
    .alert-c {
      margin-bottom: 15px;
    }
    .t1 {
      font-size: 18px;
      text-align: center;
      margin-bottom: 20px;
      span {
        font-size: 14px;
        color: #808695;
      }
    }
    .c3 {
      width: 400px;
      margin: 0 auto 20px;
    }
    .btn-wrap {
      text-align: center;
    }
    .intro-layout {
      border: 1px solid #abdcff;
      background-color: #f0faff;
      border-radius: 4px;
      padding: 16px;
      color: #515a6e;
      line-height: 1.5;
      h4 {
        margin: 0 0 5px;
        font-size: 16px;
      }
      p {
        margin-bottom: 4px;
      }
    }
    .select-area {
      display: inline-block;
      width: 28%;
    }
    .input-area {
      width: 72%;
      display: inline-block;
      vertical-align: top;
      /deep/.ep-input__inner {
        border-left: 0;
      }
    }
  }
  /deep/.c2 > .ep-advance-card-content {
    min-height: 500px;
  }
  .ep-divider--horizontal {
    margin: 18px 0;
  }
  .ep-form--item {
    margin-bottom: 10px;
  }
}
</style>
